<template>
  <ul class="todo-main">
    <transition-group name="todo" appear>
        <MyItem 
        v-for="todoObj in todos" 
        :key="todoObj.id" 
        :todo="todoObj" 
        />
    </transition-group>
   
</ul>
</template>

<script>
    import MyItem from './MyItem'

    export default {
        name:'MyList',
        components:{
            MyItem
        },
        props:['todos']
        
    }
</script>

<style scoped>
.todo-main {
margin-left: Opx;border: 1px solid #ddd;border-radius: 2px;padding: Opx;
}
.todo-empty {
height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}


/* 过渡 */
.todo-enter,
.todo-leave-to {
  transform: translateX(100%);
}

.todo-enter-active,
.todo-leave-active {
  transition: 0.5s linear;
  /* transition: 0.5s linear;   写到 background-color: orange; 那里有bug*/
}
.todo-enter-to,
.todo-leave {
  transform: translateX(0);
}
</style>